/*
 * Mobile Web Components v1.0
 * http://projects.developer.nokia.com/mobile_web_components
 *
 * Copyright 2011, Nokia
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 */
 
 
/* Sass @imports  */
 
@import "_reset";
@import "_includes";

/* Basic page layout and styles */

body {
	padding: 0 .45em;
	font-size: .95em;
	color: $color-text;
	font-family: $font-body;
	background: $color-background;
	> footer {
		margin: 1em -.45em -1em -.45em;
		padding: 0 .45em;
		@include drop-shadow;
		@include background-gradient;
		p {
			color: $color-text;
			font-size: .8em;
			padding: 0 0 1em 0;
			font-weight: 300;
			a {color: $color-text;}
		}
	}
	> footer nav ul {
		padding: 1em 0 0 0;
		li {
			padding: .3em 0;
			font-size: .9em;
			a {
				color: $color-text;
				font-weight: 300;
			}
		}
	}
}

a { color: $color-link; }
a:hover { color: $color-hover; }
a:focus { color: $color-focus; }
a:active { color: $color-active; }

blockquote { padding: .5em 1em; }

code, pre {
	width: 100%;
	overflow: hidden;
}
code {
	@include code;
}

figure img {
	width: 100%;
	height: auto;

}
figcaption {
	font-size: .65em;
}

h1, h2, h3, h4, h5, h6 {
	color: $color-header; margin: .5em 0; padding: 0;
}
h1 { font-size: 2.00em; }
h2 { font-size: 1.50em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.05em; }
h5 { font-size: 0.95em; }
h6 { font-size: 0.85em; }

p {
	margin: .5em 0 1em 0;
}

table {
  margin: 1em 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid $color-border;
  border-bottom: 1px solid $color-border;
}
td {
	margin: 0;
	padding: .5em;
	font-size: .95em;
}
tr:nth-child(even) {
	background: $color-even;
}
tr:nth-child(odd) {
	background: $color-odd;
}


/* Collapsible Component */
 
.collapsible {
	padding: 0;
	margin: 1em 0;
	dt {
		padding: .6em .3em;
		@include text-emboss;
		@include drop-shadow;
		@include background-gradient;
		h4 {
			margin: 0;
			padding: 0 0 0 24px;
			color: $color-header;
			font-size: 1.1em;
			font-weight: bold;
			text-overflow: ellepsis;
			overflow: hidden;
			background: url('../images/arrows.png') no-repeat 0 -48px;
		}
		&.select {
			@include background-gradient-hover;
		}
	}
	dd {
		overflow: hidden;
		@include transition;
	}
	&.open h4 {
		background-position: 0 -96px;
	}
}

/* Stylized Header */
 
header {
	margin: 0 0 .25em 0;
	h2 {
		margin: 0;
		padding: 0;
		font-size: 2.85em;
		font-weight: bold;
		color: lighten($color-header, 50%);
		position: relative;
		z-index:-11;
	}
	p {
		margin: -.85em 0 0 0;
		padding: .2em 0 0 0;
		font-size: 1.15em;
		font-weight: 300;
		color: lighten($color-header, 20%);
		background-color: $color-background;
	}
}

/* Scrollable Component */

.scrollable {
	width: 100%;
	margin: 2.5em 0;
	padding: 0;
	border: 2px solid $color-border;
	position: relative;
	.viewport {
		width: 100%;
		top: 0; left: 0;
		overflow: hidden;
		position: absolute;
	}
	.border {
		@include border-image;
	}
	.content {
		top:0px;
		left: 0px;
		position: absolute;
		.overlay {
			margin: 0;
			padding: 0;
			width: 100%;
			top: 0; left: 0;
			list-style: none;
			position:absolute;
			li {
				margin: 0; padding: 0;
				position: absolute;
				a {
					display: block;
					padding: .25em .75em .4em .75em;
					font-weight: 300;
					color: $color-text;
					background: $color-background;
					@include text-emboss;
					@include drop-shadow;
				}
			}
		}
	}
	.tools {
		width: 100%;
		height: 100%;
		ul {
			margin: 0;
			padding: 0;
			li {
				list-style: none;
				overflow: hidden;
				position: absolute;
				@include transition;
				@include background-gradient;
				&.select {
					@include background-gradient-hover;
				}
				&.hidden {
					opacity: 0;
				}
				a {
					display: block;
					position: relative;
					img {
						position: absolute;
					}
				}
			}
		}
	}
	.up {
		left: 40%;
		top: -30px;
		border-radius: 30px 30px 0 0;
		a {
			width: 60px;
			height: 30px;
			img {
				margin: .3em 0 0 19px;
				clip: rect(0px 24px 24px 0px);
			}
		}
	}
	.down {
		left: 40%;
		bottom: -30px;
		border-radius: 0 0 30px 30px;
		a { 
			width: 60px;
			height: 30px;
			img {
				margin: -92px 0 0 19px;
				clip: rect(96px 24px 120px 0px);
			}	
		}
	}
	.left {
		top: 40%;
		left: 0;
		border-radius: 0 30px 30px 0;
		a {
			width: 30px;
			height: 60px;
			img {
				margin: -124px 0 0 0;
				clip: rect(144px 24px 168px 0px);
			}
		}
	}
	.right {
		top: 40%;
		right: 0;
		border-radius: 30px 0 0 30px;
		a {
			width: 30px;
			height: 60px;
			img {
				margin: -28px 0 0 7px;
				clip: rect(48px 24px 72px 0px);
			}	
		}
	}
}

/* Pop-up Menu */

.popupmenu {
	z-index: 100;
	display: none;
	position: absolute;
	padding-bottom: 11px;
	@include transition-fade;
	ul {
		margin: 0;
		padding: 0;
		width: 100%;
		border-radius: $border-radius;
		@include background-gradient;
		@include drop-shadow;
		li {
			list-style: none;
			a {
				color: $color-link;
				text-decoration: none;
				padding: .5em 1em;
				display: block;
				border-bottom: 1px solid $color-border;
				@include text-emboss;
			}
			a:hover {
				color: $color-hover;
				background: darken($color-highlight, 12%);
			}
			a:active  {
				color: $color-active;
				background: darken($color-highlight, 12%);
			}
			&:first-child a {
				border-radius: $border-radius $border-radius 0 0;
			}
			&:last-child a {
				border-bottom: none;
				border-radius: 0 0 $border-radius $border-radius;
			}
		}
	}
	&.hidden {
		opacity: 0;
	}
}

/* Sliding Drawer Component */

.sliding-drawer {
	margin: 0 -.45em 1em -.45em;
	padding: .65em .45em;
	@include text-emboss;
	@include drop-shadow;
	@include background-gradient;
	img {
		margin: 0;
		padding: 0;
		top: 4px;
		left: 7px;
		float: left;
		position: absolute;
	}
	h1 {
		margin: 0;
		padding: 0 0 0 48px;
		color: $color-header;
		font-size: 1.1em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellepsis;
	}
	p {
		margin: 0;
		padding: 0 0 0 48px;
		font-size: .85em;
		color: $color-text;
		background: none;
	}
	a {
		color: $color-text;
	}
	nav {
		overflow: hidden;
		margin: 1em -.45em 0 -.45em;
		padding: 0;
		background: $color-element;
		border-top: 1px solid lighten($color-border, 20%);
		border-bottom: 1px solid darken($color-border, 10%);
		@include transition;
		ul {
			margin: 0; padding: 0;
			border-top: 1px solid $color-highlight;
			li {
				list-style: none;
				border-bottom: 1px solid darken($color-border, 5%);
				&:last-child {
					border-bottom: none;
				}
				a {
					color: $color-link;
					display: block;
					padding: .6em .45em .6em 1.5em;
					text-decoration: none;
					&:hover {
						background: darken($color-element, 5%);
					}
				}
			}
		}
	}
	div {
		height: 1em;
		margin: .2em 0 -.3em 0;
		padding: .25em 0;
		background: url('../images/arrows.png') no-repeat center -96px;
	}
	&.open div {
		background: url('../images/arrows.png') no-repeat center 0px;
	}
}


/* Slideshow Component */

.slideshow {
	height: auto;
	position: relative;
	h4 {
		margin: 2em 0 0 0;
		padding: .5em .5em .5em 1em;
		color: $color-text;
		@include text-emboss;
		@include background-gradient;
		border-top-left-radius: $border-radius;
		border-top-right-radius: $border-radius;
	}
	ol {
		list-style: none;
		background: $color-element;
		overflow: hidden;
		position: relative;
		margin: 0; padding: 0;
		li {
			width: 100%;
			height: auto;
			top: 0; left: 0;
			margin: 0; padding: 0;
			position: absolute;
			@include transition-fade;
			&:first-child {
				position: relative;
				margin-bottom: -3px;
			}
			&.hidden {
				opacity: 0;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	nav {
		ul {
			text-align: center;
			width: 100%;
			margin: 0;padding: 0;
			border-bottom-left-radius: $border-radius;
			border-bottom-right-radius: $border-radius;
			@include background-gradient;
			@include drop-shadow;
			li {
				width: 30%;
				color: $color-text;
				list-style: none;
				text-align: center;
				display: inline-block;
				@include text-emboss;
				&:first-child {float: left;}
				&:last-child {float: right;}
				&:nth-child(2) {
					// width: 30%;
					padding: .85em 0;
				}
				a {
					width: 100%;
					display: block;
					margin: 0;
					padding: .85em 0;
					color: $color-link;
					font-weight: bold;
					text-decoration: none;
					&:hover {
						color: $color-hover;
					}
					&:active  {
						color: $color-active;
					}
					&.back.select, &.next.select {
						@include background-gradient-hover;
					}
					&.back {
						border-bottom-left-radius: $border-radius;
						border-right: 1px solid $color-border;
					}
					&.next {
						border-bottom-right-radius: $border-radius;
						border-left: 1px solid $color-border;
					}
				}
			}
		}
	}
}

/* Miscellaneous */

.top {
	color: $color-link;
	margin: 1em 0;
	padding: .5em 1em .75em 2em;
	height: 1em;
	font-size: .85em;
	text-decoration: none;
	display: inline-block;
	border-radius: $border-radius*2;
	background:$color-element url('../images/arrows.png') no-repeat .35em .2em;
}

.button, .button:visited {
		font-weight: bold;
		font-size: .9em;
		color: $color-text;
		padding: .25em .75em;
		display: inline-block;
		border-radius: $border-radius;
		@include text-emboss;
		@include drop-shadow;
		@include background-gradient;
		a:hover, a:focus {
			color: $color-hover;
		}
		&.select, &.select {
			@include background-gradient-hover;
		}
}

.highlight {
	background: $color-flash;
}

#contents {
	margin: 1em 0;
	h4 {
		padding: .5em 0;
		border-bottom: 2px solid $color-border;
	}
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			border-bottom: 1px solid $color-border;
			a {
				color: $color-link;
				width: 100%;
				padding: .5em 0;
				display: block;
				text-decoration: none;
			}
			a:hover {
				color: $color-hover;
				background-color: $color-highlight;
			}
		}
	}
}